import {editPmScore} from '@/api/assessment'
import {useLoading} from '@/hooks/loading'
import useModal from '@/hooks/modalHook'
import useMyPm from '@/hooks/pm/myPm'
import deepClone from '@/libs/deepClone'
import {ant_design_vue} from '@/libs/global/antDesignVue'
import {getSession} from '@/libs/sessionStorage'
import {scoreLevelByScore} from '@/libs/toolkit'
import { defineComponent, reactive, watch, onMounted} from 'vue'
import {ScroeLevelSelect} from '../select/scoreLevelSelect'
import {CnNormalP} from '../text'
const {message} = ant_design_vue

export namespace AdjustScoreModalEmits {}

const AdjustScoreModal = defineComponent({
  props: {
    visible: Boolean,
    pmId: Number
  },
  emits: {
    'update:visible': (data: boolean): boolean => true,
    confirm: (): boolean => true
  },
  setup(props, {emit}) {
    const {visible, openModal, closeModal} = useModal()

    const {getPmByPmId} = useMyPm()

    const {loading, startLoading, closeLoading} = useLoading()

    let state = reactive<{
      oldDataSource: MyPm.Pm | undefined
      newDataSource: MyPm.Pm | undefined
    }>({
      oldDataSource: undefined,
      newDataSource: undefined
    })

    const columns: CColumn<MyPm.Pm>[] = [
      {
        title: '',
        dataIndex: 'utils'
      },
      {
        title: '考核结果',
        dataIndex: 'pmScore'
      },
      {
        title: '绩效等级',
        dataIndex: 'pmScoreLevel'
      }
    ]

    watch(
      () => props.visible,
      n => {
        if (n) {
          props.pmId &&
            getPmByPmId({
              pmId: props.pmId,
              success: data => {
                state.oldDataSource = deepClone(data)
                state.newDataSource = deepClone(data)
              }
            })
          openModal()
        } else {
          closeModal()
        }
      },
      {immediate: true}
    )

    watch(
      () => visible.value,
      n => {
        emit('update:visible', n)
        // 关闭后清空状态
        if (!n) {
          state.oldDataSource = undefined
          state.newDataSource = undefined
        }
      }
    )

    function handleModalConfirm() {
      console.log(state.newDataSource)
      let makeUserDDId = getSession('userDDId') as string
      if (!makeUserDDId) return message.warning('请刷新页面')
      let pmId = state.newDataSource?.pmId
      if (!pmId) return message.warning('绩效数据故障')
      let pmScore = state.newDataSource?.pmScore
      if (pmScore === undefined) return message.warning('请输入考核结果')
      startLoading()
      editPmScore({
        pmId,
        makeUserDDId,
        pmScore: pmScore
      })
        .then(res => {
          closeLoading()
          emit('confirm')
          closeModal()
        })
        .catch(err => {
          closeLoading()
        })
    }

    onMounted(() => {})

    return () => (
      <a-modal
        class='custom-modal w-1/3'
        title='发起评分'
        v-model={[visible.value, 'visible']}
        onOk={handleModalConfirm}
        cacelButtonProps={{
          loading: loading.value
        }}
        confirmLoading={loading.value}
      >
        <div class='my-8 p-8'>
          <a-table
            pagination={false}
            dataSource={[state.oldDataSource, state.newDataSource]}
            columns={columns}
          >
            {{
              bodyCell: ({text, record, column, index}: CBodyCell<MyPm.Pm>) => {
                switch (column.dataIndex) {
                  case 'utils':
                    if (index === 0) {
                      return <CnNormalP class='p-16'>{'修改前'}</CnNormalP>
                    } else {
                      return <CnNormalP class='p-16'>{'修改后'}</CnNormalP>
                    }
                  case 'pmScore':
                    if (index === 0) {
                      return <CnNormalP class='p-16'>{text}</CnNormalP>
                    } else {
                      return (
                        <div class='p-16'>
                          {state.newDataSource ? (
                            <a-input v-model={[state.newDataSource.pmScore, 'value']}></a-input>
                          ) : null}
                        </div>
                      )
                    }
                  case 'pmScoreLevel':
                    if (index === 0) {
                      return <CnNormalP class='p-16'>{text}</CnNormalP>
                    } else {
                      return state.newDataSource ? (
                        <div class='p-16'>
                          <CnNormalP>
                            {scoreLevelByScore(state.newDataSource.pmScore || 0)}
                          </CnNormalP>
                        </div>
                      ) : null
                    }
                  default:
                    return <CnNormalP class='p-16'>{text}</CnNormalP>
                }
              }
            }}
          </a-table>
        </div>
      </a-modal>
    )
  }
})

export default AdjustScoreModal
